<!--
 * @Author: 尔尔
 * @Date: 2024-06-17 09:17:32
 * @LastEditors: 尔尔
 * @LastEditTime: 2024-06-18 16:24:32
 * @FilePath: \ERP\src\views\Home\BigPingBoard.vue
 * @filePurpose:
-->
<template>
	<div class="wrapper">
		<header>
			<h1><span>生产过程管理系统数字化界面</span></h1>
		</header>
		<div class="main">
			<div class="mainLeft">
				<div class="module-title">
					<div class="title-text">
						<img src="../../assets/images/jiantou.png" alt="" />
						<h6>资质证书</h6>
					</div>
				</div>
				<div class="display-statistical-data">
					<div class="leftImg">
						<!-- <img src="../../assets/mapImage/tree.png" alt=""/> -->
					</div>
					<div class="possionImg1" v-if="title1">
						<div class="title1">{{ title1 }}</div>
					</div>
					<div class="possionImg2" v-if="title2">
						<div class="title2">{{ title2 }}</div>
					</div>
					<div class="possionImg3" v-if="title3">
						<div class="title3">{{ title3 }}</div>
					</div>
				</div>
			</div>
			<div class="mainCenter">
				<div id="mapecharts"></div>
			</div>
			<div class="mainRight">
				<div class="rightTop">
					<div class="module-title">
						<div class="title-text">
							<img src="../../assets/images/jiantou.png" alt="" />
							<h6>历史维修量</h6>
						</div>
					</div>
					<div class="display-statistical-data">
						<div class="data-board" id="histogram2"></div>
					</div>
				</div>
				<div class="rightBottom">
					<div class="module-title">
						<div class="title-text">
							<img src="../../assets/images/jiantou.png" alt="" />
							<h6>历史完成率</h6>
						</div>
					</div>
					<div class="display-statistical-data">
						<div class="data-board" id="histogram3"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="bottoms">
			<img src="../../assets/mapImage/bottomsMap.png" alt="" />
		</div>
	</div>
</template>
<script>
import { option4 } from "./chartOption.js"
import { listProvinceCustomer, yearMaintenance, yearPercentage, qualificationList } from "@/api/home.js"
export default {
	mounted() {
		this.getmapData()
		this.getData()
		this.getData1()
		this.getqualificationList()
	},
	data() {
		return {
			title1: "",
			title2: "",
			title3: "",
			mapecharts: null,
			objResizeObserver: null,

			histogram2: null,
			objResizeObserver2: null,

			histogram3: null,
			objResizeObserver3: null
		}
	},
	beforeDestroy() {
		this.objResizeObserver.disconnect()
		this.objResizeObserver2.disconnect()
		this.objResizeObserver3.disconnect()
	},
	created() {},
	methods: {
		async getqualificationList() {
			let result = await qualificationList()
			this.title1 = result.rows[0].qualificationName
			this.title2 = result.rows[1].qualificationName
			this.title3 = result.rows[2].qualificationName
			console.log(result, "result")
		},
		async getData1() {
			try {
				let res = await yearPercentage()
				let xData = []
				let yData = []
				this.$nextTick(() => {
					res.rows.forEach(item => {
						xData.push(item.year)
						yData.push(item.percentageComplete)
					})
					this.drawBarCharts(xData, yData)
				})
			} catch (error) {
				this.$modal.msgError("获取年度完成率数据错误")
			}
		},
		drawBarCharts(xData, yData) {
			if (this.histogram3) {
				this.histogram3.dispose()
			}
			this.histogram3 = this.$echarts.init(document.getElementById("histogram3"))

			let option = {
				tooltip: {
					trigger: "item",
					axisPointer: {
						type: "shadow"
					},
					backgroundColor: "rgba(2, 135, 147, 0.6)",
					textStyle: {
						color: "#fff"
					}
				},
				grid: {
					top: "16%",
					left: "3%",
					right: "3%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: {
					type: "category",
					data: xData,
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						color: "#fff",
						fontSize: 12,
						interval: 0
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: "value",
					minInterval: 1,
					axisLabel: {
						formatter: "{value}",
						color: "#fff",
						fontSize: 12
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "solid",
							dashOffset: 0
						}
					}
				},
				series: [
					{
						data: yData,
						type: "bar",
						barWidth: 14,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#0267FF" // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#00F0FF" // 100% 处的颜色
									}
								],
								false
							)
						},
						label: {
							show: true,
							lineHeight: 10,
							formatter: "{c}",
							position: "top",
							color: "#B6F1FF",
							fontSize: 12
						}
					}
				]
			}

			this.histogram3.setOption(option)
			this.objResizeObserver3 = new ResizeObserver(() => {
				if (this.histogram3) {
					this.histogram3.resize()
				}
			})
			this.objResizeObserver3.observe(document.getElementById("histogram3"))
		},
		async getData() {
			try {
				let res = await yearMaintenance()
				let xData = []
				let yData = []
				this.$nextTick(() => {
					res.rows.forEach(item => {
						xData.push(item.year)
						yData.push(item.maintenanceQuantity)
					})
					this.drawBarChart(xData, yData)
				})
			} catch (error) {
				this.$modal.msgError("获取查询年度维修量统计数据错误")
			}
		},
		drawBarChart(xData, yData) {
			if (this.histogram2) {
				this.histogram2.dispose()
			}
			this.histogram2 = this.$echarts.init(document.getElementById("histogram2"))
			let option = {
				tooltip: {
					trigger: "item",
					axisPointer: {
						type: "shadow"
					},
					backgroundColor: "rgba(2, 135, 147, 0.6)",
					textStyle: {
						color: "#fff"
					}
				},
				grid: {
					top: "16%",
					left: "3%",
					right: "3%",
					bottom: "3%",
					containLabel: true
				},
				xAxis: {
					type: "category",
					data: xData,
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						color: "#fff",
						fontSize: 12,
						interval: 0
					},
					axisTick: {
						show: false
					}
				},
				yAxis: {
					type: "value",
					minInterval: 1,
					axisLabel: {
						formatter: "{value}",
						color: "#fff",
						fontSize: 12
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "solid",
							dashOffset: 0
						}
					}
				},
				series: [
					{
						data: yData,
						type: "bar",
						barWidth: 14,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "#0267FF" // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#00F0FF" // 100% 处的颜色
									}
								],
								false
							)
						},
						label: {
							show: true,
							lineHeight: 10,
							formatter: "{c}",
							position: "top",
							color: "#B6F1FF",
							fontSize: 12
						}
					}
				]
			}

			this.histogram2.setOption(option)
			this.objResizeObserver2 = new ResizeObserver(() => {
				if (this.histogram2) {
					this.histogram2.resize()
				}
			})
			this.objResizeObserver2.observe(document.getElementById("histogram2"))
		},
		async getmapData() {
			if (this.mapecharts) {
				this.mapecharts.dispose()
			}
			this.mapecharts = this.$echarts.init(document.getElementById("mapecharts"))
			var series = []
			let newData = [
				{
					code: 11,
					name: "北京",
					value: [116.405285, 39.904989, 50, "北京 5"]
				},
				{
					code: 12,
					name: "天津",
					value: [117.190182, 39.125596, 50, "天津 14"]
				},
				{
					code: 13,
					name: "河北",
					value: [114.502461, 38.045474, 50, "河北 14"]
				},
				{
					code: 14,
					name: "山西",
					value: [110.849248, 36.857014, 50, "山西 14"]
				},
				{
					code: 15,
					name: "内蒙古自治区",
					value: [111.670801, 40.818311, 50, "内蒙古自治区 14"]
				},
				{
					code: 21,
					name: "辽宁",
					value: [123.429096, 41.796767, 50, "辽宁 14"]
				},
				{
					code: 22,
					name: "吉林",
					value: [125.3245, 43.886841, 50, "吉林 14"]
				},
				{
					code: 23,
					name: "黑龙江",
					value: [126.642464, 45.756967, 50, "黑龙江 14"]
				},
				{
					code: 31,
					name: "上海",
					value: [121.472644, 31.231706, 50, "上海 14"]
				},
				{
					code: 32,
					name: "江苏",
					value: [119.967413, 33.041544, 50, "天津 14"]
				},
				{
					code: 33,
					name: "浙江",
					value: [120.153576, 29.287459, 50, "浙江 14"]
				},
				{
					code: 34,
					name: "安徽",
					value: [116.083042, 31.86119, 50, "安徽 14"]
				},
				{
					code: 35,
					name: "福建",
					value: [119.306239, 26.075302, 50, "福建 14"]
				},
				{
					code: 36,
					name: "江西",
					value: [115.892151, 28.676493, 50, "江西 14"]
				},

				{
					code: 37,
					name: "山东",
					value: [117.000923, 36.675807, 50, "山东 14"]
				},
				{
					code: 41,
					name: "河南",
					value: [113.965412, 33.757975, 50, "河南 14"]
				},
				{
					code: 42,
					name: "湖北",
					value: [114.298572, 30.584355, 50, "湖北 14"]
				},
				{
					code: 43,
					name: "湖南",
					value: [110.982279, 28.19409, 50, "湖南 14"]
				},
				{
					code: 44,
					name: "广东",
					value: [113.280637, 25.125178, 50, "广东 14"]
				},
				{
					code: 45,
					name: "广西壮族自治区",
					value: [108.320004, 22.82402, 50, "广西壮族自治区 14"]
				},

				{
					code: 46,
					name: "海南",
					value: [110.33119, 20.031971, 50, "海南 14"]
				},
				{
					code: 50,
					name: "重庆",
					value: [106.504962, 29.533155, 50, "重庆 14"]
				},
				{
					code: 51,
					name: "四川",
					value: [104.065735, 30.659462, 50, "四川 14"]
				},
				{
					code: 52,
					name: "贵州",
					value: [106.713478, 26.578343, 50, "贵州 14"]
				},
				{
					code: 53,
					name: "云南",
					value: [102.712251, 25.040609, 50, "云南 14"]
				},
				{
					code: 54,
					name: "西藏自治区",
					value: [91.132212, 29.660361, 50, "西藏自治区 14"]
				},
				{
					code: 61,
					name: "陕西",
					value: [108.948024, 34.263161, 50, "陕西 14"]
				},
				{
					code: 62,
					name: "甘肃",
					value: [103.823557, 35.058039, 50, "甘肃 14"]
				},
				{
					code: 63,
					name: "青海",
					value: [101.778916, 36.623178, 50, "青海 14"]
				},
				{
					code: 64,
					name: "宁夏回族自治区",
					value: [106.278179, 38.46637, 50, "宁夏回族自治区 14"]
				},
				{
					code: 65,
					name: "新疆维吾尔自治区",
					value: [87.617733, 43.792818, 50, "新疆维吾尔自治区 14"]
				},
				{
					code: 71,
					name: "台湾省",
					value: [121.509062, 25.044332, 50, "台湾省 14"]
				},
				{
					code: 81,
					name: "香港特别行政区",
					value: [114.173355, 22.320048, 50, "香港特别行政区 14"]
				},
				{
					code: 82,
					name: "澳门特别行政区",
					value: [113.54909, 21.198951, 50, "澳门特别行政区 14"]
				}
			]
			let showMapData = []
			let result = await listProvinceCustomer()
			result.rows.forEach(item => {
				newData.forEach(items => {
					if (item.provinceType == items.code) {
						items.value[3] = `${item.provinceName} ${item.customerNumber}`
						showMapData.push({
							code: item.provinceType,
							name: item.provinceName,
							value: items.value
						})
					}
				})
			})
			showMapData.forEach((item, i) => {
				series.push({
					name: item.name,
					type: "effectScatter",
					coordinateSystem: "geo",
					zlevel: 2,
					rippleEffect: {
						brushType: "stroke"
					},
					label: {
						show: true,
						position: "right",
						formatter: "{@[3]}",
						fontSize: 10,
						color: "#00B8FF",
            emphasis: {
						label: {
							show: true,
							position: "left", // 标签位置，可以是 'top', 'bottom', 'left', 'right' 等
							formatter: "{b}"
						}
					},
					},
					symbolSize: 2,
					itemStyle: {
						normal: {
							color: "#00B8FF"
						}
					},
					data: showMapData
				})
			})
			option4.series = series
			this.mapecharts.setOption(option4)
			this.objResizeObserver = new ResizeObserver(() => {
				if (this.mapecharts) {
					this.mapecharts.resize()
				}
			})
			this.objResizeObserver.observe(document.getElementById("mapecharts"))
		}
	}
}
</script>
<style lang="scss" scoped>
@import "./outStyle.scss";

.wrapper {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: url("../../assets/images/dataBoard1.png") no-repeat center;
	background-size: cover;
	padding: 0 1.45rem;

	header {
		width: 100%;
		height: 4.75rem;
		background: url("../../assets/images/dataBoard2.png") no-repeat center;
		background-size: 100% 100%;
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	header h1 {
		margin: auto;
		display: table;
	}
	header h1 span {
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		font-size: 2.25rem;
		color: #ffffff;
		line-height: 1rem;
		letter-spacing: 4px;
	}

	.main {
		margin: 0.5rem 0;
		display: flex;
		align-items: center;
		height: calc(100vh - 34.8rem);
		.mainLeft {
			background: url("../../assets/mapImage/mainleft.png") no-repeat center;
			background-size: 100% 100%;
			width: 34.875rem;
			height: 100%;
			.module-title {
				width: 100%;
				height: 3.2rem;
				display: flex;
				justify-content: space-between;
				background: url("../../assets/images/titltBG1.png") no-repeat;
				background-size: 100% 100%;
				background-position: center -3px;
				align-items: center;
				overflow: hidden;
				padding-right: 10px;
				padding-bottom: 4px;
				.title-text {
					width: 45%;
					height: 100%;
					overflow: hidden;
					display: flex;
					align-items: center;
					h6 {
						font-family: Microsoft YaHei;
						font-weight: bold;
						font-size: 1.25rem;
						letter-spacing: 2px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #00ebff;
						font-style: italic;
						background: linear-gradient(0deg, #00d2ff 0%, #d5f3ff 100%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						margin: 0;
					}
				}
			}
			.display-statistical-data {
				height: calc(100% - 3.3rem);
				position: relative;
				width: 100%;
				overflow: hidden;
				background: url("../../assets/mapImage/tree.png") no-repeat;
				background-size: 100% 100%;
				.leftImg {
					width: 100%;
					height: 100%;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.possionImg1 {
					position: absolute;
					left: 14%;
					top: 35%;
					width: 5.625rem;
          // opacity: 0.5;
					height:  5.625rem;
					background: url("../../assets/mapImage/circle1.png") no-repeat;
					background-size: 100% 100%;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}
				.title1 {
          // opacity: 1; /* 确保文字是不透明的 */
					width: 4rem;
          font-size: 0.65rem;
					color: #fff;
					text-align: center;
					margin: auto;
					vertical-align: middle;
          font-family: 'Microsoft YaHei';
					height: 5rem;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}
				.title2 {
          // opacity: 1; /* 确保文字是不透明的 */
					text-align: center;
					width: 4rem;
          font-size: 0.65rem;
					color: #fff;
					margin: auto;
          font-family: 'Microsoft YaHei';
					vertical-align: middle;
					height: 5rem;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}
				.possionImg2 {
					width: 5.625rem;
					height:  5.625rem;
					background: url("../../assets/mapImage/circle1.png") no-repeat;
					background-size: 100% 100%;
					position: absolute;
					left: 70%;
					top: 27%;
          // opacity: 0.5;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}

				.title3 {
          // opacity: 1; /* 确保文字是不透明的 */
					text-align: center;
					width:4rem;
					font-size: 0.65rem;
          font-family: 'Microsoft YaHei';
					color: #fff;
					margin: auto;
					vertical-align: middle;
					height:5rem;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}
				.possionImg3 {
					width:  5.625rem;
					height: 5.625rem;
					background: url("../../assets/mapImage/circle1.png") no-repeat;
					background-size: 100% 100%;
					position: absolute;
					left: 40%;
					top: 6%;
          // opacity: 0.5;
					display: flex; /* 使用flex布局 */
					justify-content: center; /* 水平居中 */
					align-items: center; /* 垂直居中 */
					text-align: center; /* 文字水平居中，如果内层是文本元素 */
				}
			}
		}
		.mainCenter {
			width: 47.1875rem;
			height: 100%;
			#mapecharts {
				width: 100%;
				height: 100%;
			}
		}
		.mainRight {
			height: 100%;
			.rightTop,
			.rightBottom {
				background: url("../../assets/mapImage/mainRight.png") no-repeat center;
				background-size: 100% 100%;
				width: 34.875rem;
				height: 49%;
				.module-title {
					width: 100%;
					height: 3.3rem;
					display: flex;
					background: url("../../assets/images/titltBG1.png") no-repeat;
					background-size: 100% 100%;
					background-position: center -3px;
					justify-content: space-between;
					align-items: center;
					overflow: hidden;
					padding-right: 10px;
					padding-bottom: 4px;
					.title-text {
						width: 45%;
						height: 100%;
						overflow: hidden;
						display: flex;
						align-items: center;
						h6 {
							font-family: Microsoft YaHei;
							font-weight: bold;
							font-size: 1.25rem;
							letter-spacing: 2px;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							color: #00ebff;
							font-style: italic;
							background: linear-gradient(0deg, #00d2ff 0%, #d5f3ff 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							margin: 0;
						}
					}
				}

				.display-statistical-data {
					height: calc(100% - 3.3rem);
					width: 100%;
					overflow: hidden;
				}
			}
			.rightBottom {
				margin-top: 0.5rem;
			}
			#histogram2,
			#histogram3 {
				width: 100%;
				height: 100%;
			}
		}
	}

	.bottoms {
		width: 116.875rem;
		height: 28.875rem;
		margin: 0.5rem 0;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
